<template>
  <div class="content"> 
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        :defaultConfig="editorConfig"
        :mode="mode"
        v-model="valueHtml"
        style="height: 400px; overflow-y: hidden"
        @onCreated="handleCreated"
        @onChange="handleChange"

      />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css';
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted, inject } from "vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import {useRouter,useRoute} from "vue-router"
const router = useRouter()
// const route = useRoute()

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
const toolbarConfig = {excludeKeys:["uoloadVideo"]};
const editorConfig = { placeholder: '请输入内容...' };
const mode = ref("default")
const valueHtml =ref("")

//defineProps和defineEmit

// 组件销毁时，也及时销毁编辑器，重要！
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = (editor) => {
      console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    const handleChange = (editor) => {
      console.log('change:', editor.getHtml());
    };

</script>

<style lang="scss" scoped>
</style>